<template>
  <el-form
    ref="formRef"
    :inline="inline"
    label-suffix=":"
    :model="qForm"
    :rules="rules"
    :class="{
      'demo-inline-form': inline,
    }"
    label-width="80px"
  >
    <template v-for="item in queryConfig" :key="item.prop">
      <el-form-item
        :label="item.label"
        :label-width="item.labelWidth"
        :prop="item.prop"
      >
        <el-input
          v-if="item.queryType === 'input'"
          v-model="qForm[item.prop]"
          clearable
          :placeholder="item.placeholder"
        ></el-input>

        <el-input-number
          v-if="item.queryType === 'inputNumber'"
          v-model="qForm[item.prop]"
          class="input-number-wrap"
          clearable
          :step="1"
          :min="0"
          :placeholder="item.placeholder"
          :controls="false"
          step-strictly
        ></el-input-number>

        <el-select
          v-if="item.queryType === 'select'"
          v-model="qForm[item.prop]"
          :placeholder="item.placeholder"
          :multiple="item.multiple || false"
          clearable
          filterable
        >
          <el-option
            v-for="option in item.options"
            :key="option.value"
            :label="option.label"
            :value="option.value"
          ></el-option>
        </el-select>
        <el-date-picker
          v-if="item.queryType === 'date'"
          v-model="qForm[item.prop]"
          :type="item.queryType"
          clearable
          class="datetime-picker-width"
          :placeholder="item.placeholder || '选择日期'"
          :disabledDate="item.disabledDate"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :value-format="item.valueFormat || 'YYYY-MM-DD'"
        ></el-date-picker>
        <el-date-picker
          v-if="item.queryType === 'daterange'"
          v-model="qForm[item.prop]"
          :type="item.queryType"
          clearable
          :disabledDate="item.disabledDate"
          class="datetime-picker-width"
          :placeholder="item.placeholder || '选择日期范围'"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          :value-format="item.valueFormat || 'YYYY-MM-DD'"
        ></el-date-picker>
        <el-date-picker
          v-if="item.queryType === 'datetime'"
          v-model="qForm[item.prop]"
          :type="item.queryType"
          :disabledDate="item.disabledDate"
          clearable
          class="datetime-picker-width"
          :placeholder="item.placeholder || '选择时间'"
          :value-format="item.valueFormat || 'YYYY-MM-DD HH:mm:ss'"
        />
        <el-date-picker
          v-if="item.queryType === 'datetimerange'"
          v-model="qForm[item.prop]"
          :type="item.queryType"
          :disabledDate="item.disabledDate"
          clearable
          class="datetime-picker-width"
          :placeholder="'选择时间范围'"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          :value-format="item.valueFormat || 'YYYY-MM-DD HH:mm:ss'"
          :default-time="[
            new Date(2000, 1, 1),
            new Date(2000, 1, 1, 23, 59, 59),
          ]"
        >
        </el-date-picker>
      </el-form-item>
    </template>
    <el-form-item>
      <el-button type="primary" @click="emits('search', qForm, false)"
        >查询</el-button
      >
      <el-button @click="reset">重置</el-button>
    </el-form-item>
  </el-form>
</template>
<script setup lang="ts">
import { reactive, ref } from "vue";
import type { FormRules, FormInstance } from "element-plus";
import type { IQueryFrom } from "@/types/queryTable";

interface IFrom {
  queryConfig: IQueryFrom[];
  inline?: boolean;
  rules?: FormRules;
}
const props = withDefaults(defineProps<IFrom>(), {
  inline: true,
});

const emits = defineEmits<{
  (
    e: "search",
    qForm: {
      [propName: string]: any;
    },
    isReset: boolean
  ): void;
}>();

const qForm = reactive<{
  [propName: string]: any;
}>({});
const formRef = ref<FormInstance>()

const reset = () => {
  formRef.value?.resetFields()
  emits('search', qForm, true)
}

props.queryConfig.forEach((item) => {
  item.placeholder = item.placeholder
    ? item.placeholder
    : item.queryType === "input" || item.queryType === "inputNumber"
    ? `请输入${item.label}`
    : `请选择${item.label}`;

  if (item.defaultValue) {
    qForm[item.prop] = item.defaultValue;
  } else {
    qForm[item.prop] = "";
  }
});
</script>

<style lang="scss">
.demo-inline-form {
  .datetime-picker-width {
    min-width: 100% !important;
  }
  .el-input {
    width: 200px;
  }
  .el-input__wrapper {
    width: 100% !important;
  }
}
</style>
